<template>
	<view class="car">
		<block>
			<view class="car-top">
				<view class="all-chose">
					<u-checkbox-group>
						<u-checkbox @change="allCheckboxChange" name="all" v-model="allChecked" size="36" active-color="#141414">全选</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="all-chose-edit" @click="isManage=!isManage" v-if="!isManage">编辑</view>
				<view class="all-chose-edit complate" @click="isManage=!isManage" v-else>完成</view>
			</view>
			<view class="car-tabs">
				<u-tabs 
					:list="carTabs" 
					:current="carIndex" 
					@change="changeTabs" 
					inactive-color="#666"
					active-color="#141414"
					font-size="28"
					:is-scroll="false">
				</u-tabs>
			</view>
			<view class="car-list" v-if="show">
				<view class="car-list-tips" v-if="carList.length>1">提示：多个店铺商品请分开下单</view>
				<view class="car-list-tips" v-if="carIndex==1">提示：此处的商品是由您从搭配方案中一键添加的商品</view>
				<view class="car-item" v-for="(data,index) in carList" :key="index">
					<view class="car-item-allchose">
						<u-checkbox-group>
							<u-checkbox @change="shopAllCheckboxChange" v-model="data.shopAllChecked" size="36" active-color="#141414" :name="data.store_id">
								{{data.store_name}}
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="car-money-off" v-if="data.shelf_info">
						<view class="car-money-off-item" v-for="(shelfItem,shelfIndex) in data.shelf_info" :key="shelfItem.shelf_id" @click="goRedemption(shelfItem.shelf_id)">
							{{shelfItem.subtitle}} <view class="btn">去换购 <u-icon name="arrow-right"></u-icon></view>
						</view>
					</view>
					<view class="car-goods-list">
						<view class="car-item-goods" v-for="(item,goodsIndex) in data.goods_sku" :key="goodsIndex">
							<u-checkbox v-model="item.checked" size="36" active-color="#141414" @change="choseSingleItem($event,index)"></u-checkbox>
							<view class="goods-info" @click.stop="goProInfo(item.goods_id,item.store_id,item.type)">
								<view class="goods-info-tag" v-if="item.goods_type==3 || item.goods_type==8">换购</view>
								<image :src="item.img" mode="aspectFill"></image>
								<view class="goods-info-text">
									<view class="goods-name">{{item.goods_name}}</view>
									<view class="goods-sku">
										<text v-if="item.color">{{item.color}}</text>
										<text v-if="item.size">{{item.size}}</text>
										<text v-if="item.lining">{{item.lining}}</text>
									</view>
									<view class="goods-send" v-if="item.send_name">货期：{{item.send_name}}</view>
									<view class="goods-price">
										<view class="goods-price-left">￥<text>{{item.retail_price}}</text></view>
									</view>
								</view>
							</view>
							<view class="goods-info-num">
								<u-number-box
									@minus="CalculationPrice($event,item.cart_id)"
									@plus="CalculationPrice($event,item.cart_id)"
									:min="item.coefficient_num?item.coefficient_num:1"
									:step="item.coefficient_num?item.coefficient_num:1"
									v-model="item.num"
									:input-width="75"
									:input-height="72" bg-color="#FFFFFF"
									:disabled="item.goods_type==2?true:false">
								</u-number-box>
							</view>
						</view>
						<view class="car-item-goods" v-for="(item,groupIndex) in data.group" :key="item.group_id">
							<u-checkbox v-model="item.checked" size="36" active-color="#141414" @change="choseSingleItem($event,index)"></u-checkbox>
							<view class="goods-info" @click.stop="goGroupInfo(item.group_id,item.is_house)">
								<image :src="item.image_thumb" mode="aspectFill"></image>
								<view class="goods-info-text">
									<view class="goods-name">{{item.group_name}}</view>
									<view :class="['goods-sku',{active: item.lookGoods}]" @click.stop="showGoods(index,groupIndex,item.group_name,item.goods,item.is_house)">已选{{item.goods.length}}件商品 <u-icon name="arrow-down"></u-icon>
									</view>
									<view class="goods-price">
										<view class="goods-price-left">￥<text>{{item.retail_price}}</text></view>
									</view>
								</view>
							</view>
							<view class="goods-info-num">
								<u-number-box
									@minus="CalculationPrice"
									@plus="CalculationPrice"
									:disabled="true"
									:min="item.coefficient_num?item.coefficient_num:1"
									:step="item.coefficient_num?item.coefficient_num:1"
									v-model="item.num"
									:input-width="75"
									:input-height="72" bg-color="#FFFFFF">
								</u-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="car-bottom">
				<view class="car-bottom-price">
					<block v-if="!isManage">
						<text>合计：</text>
						<text class="symbol">￥</text>
						<text class="price">{{Amount}}</text>
					</block>
				</view>
				<view class="car-bottom-btn car-bottom-export" @click="goExportCar">导出清单({{choseedNum}})</view>
				<view class="car-bottom-btn" v-if="!isManage" @click="goConfirmOrder">结算({{choseedNum}})</view>
				<view class="car-bottom-btn car-bottom-btn-del" @click="del" v-else>删除({{choseedNum}})</view>
			</view>
		</block>
		
		<block v-if="!carList.length && carIndex==0 && show">
			<pt-nothing :fixed="true" :custom="true" top="180" bottom="calc(50px + env(safe-area-inset-bottom))">
				<view class="car-empty">
					<view class="icon"><image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png"></image></view>
					<view class="car-empty-tit">购物车还是空的</view>
					<view class="car-empty-subtit">去挑几件中意的商品吧</view>
					<view class="car-empty-btn" @click="goProList">去挑选</view>
				</view>
			</pt-nothing>
		</block>
		
		<block v-if="!carList.length && carIndex==1 && show">
			<pt-nothing :fixed="true" :custom="true" top="180" bottom="calc(50px + env(safe-area-inset-bottom))">
				<view class="car-empty">
					<view class="icon"><image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png"></image></view>
					<view class="car-empty-tit">您还未从搭配方案中添加过商品</view>
					<view class="car-empty-subtit">去挑几件中意的商品吧</view>
					<view class="car-empty-btn" @click="goMatchList">去逛逛</view>
				</view>
			</pt-nothing>
		</block>
		
		<u-tabbar :list="tabbarList" :icon-size="52" :height="100" active-color="#f59359"></u-tabbar>
		
		<uni-popup ref="groupGoods" type="bottom" class="car-group-goods" @change="showGoodsPopChange">
			<view class="groupGoods">
				<view class="groupGoods-tit">
					<view class="group-name">{{title}}</view>
					<u-icon name="close-circle" size="40" @click="closeGroupGoods"></u-icon>
				</view>
				<view class="groupGoods-list-box">
					<scroll-view scroll-y class="groupGoods-list">
						<view class="groupGoods-item" v-for="(item,index) in groupGoodsList" :key="index">
							<image :src="item.img" mode="aspectFill"></image>
							<view class="goods-info-text">
								<view class="goods-name">{{item.goods_name}}</view>
								<view class="goods-sku">
									<text v-if="item.color">{{item.color}}</text>
									<text v-if="item.size">{{item.size}}</text>
									<text v-if="item.lining">{{item.lining}}</text>
								</view>
								<view class="goods-price">
									<view class="goods-price-left" v-if="is_house!=3">￥<text>{{item.retail_price}}</text></view>
									<view class="goods-info-num">x{{item.num}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				checked: true,
				title: '',
				groupGoodsList: [],
				isManage: false,
				allChecked: false,
				Amount: 0,
				choseedNum: 0,
				carList: [],
				// 足迹参数
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				carTabs: [{
					name: '普通商品'
				},{
					name: '方案商品'
				}],
				carIndex: 0,
				from: '',
				is_house: '',
				tabbarList: [],
				userInfo: ''
			};
		},
		onLoad(options) {
			if(options.from){
				this.from = options.from
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')):''
			this.tabbarList = getApp().globalData.merchantMenu
			if((this.from || this.carIndex == 1) && this.userInfo){
				this.carIndex = 1
				this.init('from')
				return
			}
			if(this.userInfo){
				this.init()
			}
			if(!this.userInfo){
				this.show = true
			}
		},
		methods: {
			init(type){
				let data = {
					from: 1
				}
				if(type){
					data.from = 2
				}
				this.$u.api.CartList(data).then(res => {
					this.show = true
					this.allChecked = false
					this.choseedNum = 0
					this.Amount = 0
					this.carList = res.datas.on_sale
					this.CalculationPrice()
				}).catch(() => {
					this.show = true
				})
			},
			// 所有全选
			allCheckboxChange(e){
				this.carList.forEach(item => {
					this.$set(item,'shopAllChecked',e.value)
					if(item.goods_sku){
						item.goods_sku.forEach(data => {
							this.$set(data,'checked',e.value)
						})
					}
					if(item.group){
						item.group.forEach(data => {
							this.$set(data,'checked',e.value)
						})
					}
				})
				this.CalculationPrice()
			},
			// 店铺全选
			shopAllCheckboxChange(e){
				this.carList.forEach(item => {
					if(item.store_id==e.name){
						if(item.shopAllChecked){
							if(item.goods_sku){
								item.goods_sku.forEach(data => {
									this.$set(data,'checked',true)
								})
							}
							if(item.group){
								item.group.forEach(data => {
									this.$set(data,'checked',true)
								})
							}
						}else{
							if(item.goods_sku){
								item.goods_sku.forEach(data => {
									this.$set(data,'checked',false)
								})
							}
							if(item.group){
								item.group.forEach(data => {
									this.$set(data,'checked',false)
								})
							}
						}
					}
				})
				this.isAllChose()
				this.CalculationPrice()
			},
			// 单个选择商品或套餐
			choseSingleItem(e,index){
				let num = 0
				let arr = []
				if(this.carList[index].goods_sku && this.carList[index].group){
					arr = this.carList[index].goods_sku.concat(this.carList[index].group)
				}else if(this.carList[index].goods_sku && !this.carList[index].group){
					arr = this.carList[index].goods_sku
				}else if(!this.carList[index].goods_sku && this.carList[index].group){
					arr = this.carList[index].group
				}
				arr.forEach(item => {
					if(item.checked){
						num++
					}
				})
				if(num==arr.length){
					this.$set(this.carList[index],'shopAllChecked',true)
				}else{
					this.$set(this.carList[index],'shopAllChecked',false)
				}
				this.isAllChose()
				this.CalculationPrice()
			},
			// 是否全部选择
			isAllChose(){
				let i,
						num = 0
				for (i in this.carList){
					if(this.carList[i].shopAllChecked){
						num++
					}
				}
				if(num==this.carList.length){
					this.allChecked = true
				}else{
					this.allChecked = false
				}
			},
			// 计算价格&修改数量
			CalculationPrice(e,cart_id){
				if(cart_id){
					this.$u.api.cart_num({cart_id: cart_id,num: e.value})
				}
				this.Amount = 0
				this.choseedNum = 0
				this.carList.forEach(item => {
					if(item.goods_sku){
						item.goods_sku.forEach(data => {
							if(data.checked){
								this.Amount += data.retail_price * data.num
								this.choseedNum++
							}
						})
					}
					if(item.group){
						item.group.forEach(data => {
							if(data.checked){
								this.Amount += data.retail_price * data.num
								this.choseedNum++
							}
						})
					}
				})
			},
			// 删除购物车
			del(){
				let ids = []
				this.carList.forEach(item => {
					if(item.goods_sku){
						item.goods_sku.forEach(data => {
							if(data.checked){
								ids.push(data.cart_id)
							}
						})
					}
					if(item.group){
						item.group.forEach(data => {
							if(data.checked){
								ids.push(data.cart_id)
							}
						})
					}
				})
				if(!ids.length){
					uni.showToast({
						icon: 'none',
						title: '请选择商品'
					})
					return false
				}
				this.$u.api.CartDelet({cart_id: ids.join(',')}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '删除成功',
						duration: 1500
					})
					setTimeout(() => {
						if(this.from){
							this.init('from')
						}
						this.init()
					},1500)
				})
			},
			// 查看套餐商品
			showGoods(index,groupIndex,group_name,groupGoodsList,is_house){
				this.is_house = is_house
				this.$refs.groupGoods.open()
				this.title = group_name
				this.groupGoodsList = groupGoodsList
				if(!this.carList[index].group[groupIndex].lookGoods){
					this.$set(this.carList[index].group[groupIndex],'lookGoods',true)
				}else{
					this.$set(this.carList[index].group[groupIndex],'lookGoods',false)
				}
			},
			// 关闭套餐商品弹窗
			closeGroupGoods(){
				this.$refs.groupGoods.close()
			},
			showGoodsPopChange(e){
				if(!e.show){
					this.carList.forEach(item => {
						if(item.group){
							item.group.forEach(data => {
								data.lookGoods = false
							})
						}
					})
				}
			},
			// 跳转确认订单
			goConfirmOrder(){
				if(!this.choseedNum){
					uni.showToast({
						icon: 'none',
						title: '您还没有选择商品哦'
					})
					return false
				}
				let ids = []
				
				let store_id = []
				
				this.carList.forEach(item => {
					if(item.goods_sku){
						item.goods_sku.forEach(data => {
							if(data.checked){
								ids.push(data.cart_id)
								store_id.push(data.store_id)
							}
						})
					}
					if(item.group){
						item.group.forEach(data => {
							if(data.checked){
								ids.push(data.cart_id)
								store_id.push(data.store_id)
							}
						})
					}
				})
				if(this.unique(store_id).length > 1){
					uni.showToast({
						icon: 'none',
						title: '您选择了不同店铺的商品,请分开提交'
					})
					return
				}
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/car/confirmOrder/confirmOrder?ids=' + ids.join(',')
				})
			},
			// 去重
			unique(arr) {
				var newArr = [];
				for(var i = 0; i < arr.length; i++){
						if(newArr.indexOf(arr[i]) == -1){
								newArr.push(arr[i])
						}
				}
				return newArr;
			},
			goProList(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/search/search-result'
				})
			},
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1,
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			goProInfo(goods_id,store_id,type){
				if(type==6){
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/light/light-product-info?isMerchant=true&goods_id='+goods_id
					})
					return
				}
				if(store_id!=1){
					getApp().goProInfo(goods_id,true)
				}else{
					getApp().goProInfo(goods_id)
				}
			},
			goGroupInfo(group_id,group_type){
				if(group_type==2){
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/package/house-info?group_id='+group_id
					})
				}else{
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/package/n98-info?group_id='+group_id
					})
				}
			},
			changeTabs(e){
				this.carIndex = e
				this.show = false
				switch (e){
					case 0:
						this.from = ''
						this.init()
						break;
					case 1:
						this.init('from')
						break;
				}
			},
			goMatchList(){
				uni.switchTab({
					url: '/pages/tie-in-list/tie-in-list'
				})
			},
			goExportCar(){
				if(!this.choseedNum){
					uni.showToast({
						icon: 'none',
						title: '请选择需要导出的商品'
					})
					return false
				}
				let ids = []
				this.carList.forEach(item => {
					if(item.goods_sku){
						item.goods_sku.forEach(data => {
							if(data.checked){
								ids.push(data.cart_id)
							}
						})
					}
					if(item.group){
						item.group.forEach(data => {
							if(data.checked){
								ids.push(data.cart_id)
							}
						})
					}
				})
				let data = {
					cart_ids: ids.join(',')
				}
				// #ifdef H5
				uni.showLoading({
					title: '正在导出'
				})
				this.$u.api.WxGetCartDataExcel(data).then(res => {
					uni.showToast({
						icon: 'none',
						title: '导出成功'
					})
					window.open(res.datas)
				}).catch(() => {
					uni.showToast({
						icon: 'none',
						title: '导出失败'
					})
				})
				// #endif
				// #ifdef MP-WEIXIN || APP-PLUS
				uni.showLoading({
					title: '正在导出'
				})
				let name = new Date().getTime()
				this.$u.api.WxGetCartDataExcel(data).then(res => {
					uni.downloadFile({
						url: res.datas,
						// #ifdef MP-WEIXIN
						filePath: wx.env.USER_DATA_PATH + '/' + name + '.xlsx',
						// #endif
						success: (downRes) => {
							// #ifdef MP-WEIXIN
							let filePath = downRes.filePath;
							// #endif
							// #ifdef APP-PLUS
							let filePath = downRes.tempFilePath;
							// #endif
							uni.openDocument({
								filePath: filePath,
								fileType: 'xlsx',
								showMenu: true,
								success: (success) => {
									console.log('打开文档成功', success)
								},
								fail: (fail) => {
									console.log('打开文档失败', fail)
									uni.showToast({
										icon: 'none',
										title: '导出失败，请重试',
									})
								},
								complete: () => {
									uni.hideLoading()
								}
							})
						}
					})
				})
				// #endif
			},
			goRedemption(shelf_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/car/redemption/redemption?shelf_id='+shelf_id
				})
			}
		},
		mounted() {
			this.addFootParam.start_time = parseInt(new Date().getTime() / 1000)
		},
		onHide() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看购物车')
			}
		},
		onUnload() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看购物车')
			}
		}
	}
</script>

<style lang="scss">
	.u-checkbox-group{
		display: block;
	}
	.u-checkbox{
		display: flex;
		line-height: normal;
		/deep/ .u-checkbox__label{
			margin-top: 2px;
			margin-left: 30rpx;
			margin-right: 0;
		}
	}
	page{
		background-color: #f9f9f9;
	}
	.car{
		padding: 120rpx 0 140rpx;
		.car-tabs{
			position: fixed;
			top: 100rpx;
			left: 0;
			right: 0;
			z-index: 10;
		}
		.car-top{
			display: flex;
			justify-content: space-between;
			background-color: #FFF;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			align-items: center;
			padding: 0 30rpx;
			border-bottom: solid 2rpx rgba(20,20,20,0.05);
			z-index: 10;
			.all-chose-edit{
				font-size: 28rpx;
				color: #141414;
				&.complate{
					color: #F59359;
				}
			}
		}
		.car-item-allchose{
			background-color: #FFF;
			padding: 30rpx;
			font-size: 28rpx;
			font-weight: bold;
			/deep/ .u-checkbox__label{
				color: #141414;
			}
		}
		.car-money-off{
			background-color: #FFF;
			padding: 0 30rpx 30rpx;
			.car-money-off-item{
				margin-left: 66rpx;
				border: solid 2rpx #F2F2F2;
				height: 52rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #141414;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				border-radius: 4rpx;
				&:last-child{
					margin-bottom: 0;
				}
				.btn{
					height: 52rpx;
					line-height: 52rpx;
					background-color: #FEF7F2;
					color: #F59359;
					padding-left: 10rpx;
					font-size: 24rpx;
				}
			}
		}
		.car-list{
			padding-top: 80rpx;
		}
		.car-list-tips{
			background-color: #FFF;
			padding: 20rpx;
			font-size: 24rpx;
			color: #F59359;
			border-bottom: solid 1px #F4F4F4;
		}
		.car-item{
			margin-bottom: 20rpx;
			&:last-child{
				margin-bottom: 0;
			}
		}
		.car-goods-list{
			background-color: #FFF;
			.car-item-goods{
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx 50rpx;
				position: relative;
				.goods-info{
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: flex-start;
					position: relative;
					.goods-info-tag{
						position: absolute;
						z-index: 1;
						left: 0;
						right: 0;
						width: 60rpx;
						height: 36rpx;
						line-height: 36rpx;
						background-color: #FEF7F2;
						border-radius: 4rpx 0px 4rpx 0px;
						font-size: 22rpx;
						color: #F59359;
					}
					image{
						width: 210rpx;
						height: 210rpx;
						margin-right: 30rpx;
					}
					.goods-info-text{
						flex: 1;
						min-width: 0;
						.goods-name{
							font-size: 28rpx;
							color: #141414;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.goods-price{
							margin-top: 20rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.goods-price-left{
								font-size: 24rpx;
								color: #141414;
								text{
									font-size: 32rpx;
								}
							}
						}
						.goods-sku{
							margin-top: 15rpx;
							color: #757575;
							font-size: 22rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							text{
								margin-right: 20rpx;
							}
							/deep/ .u-icon{
								transition: all .5s;
								margin-left: 20rpx;
							}
							&.active{
								/deep/ .u-icon{
									transform: rotate(-180deg);
								}
							}
						}
						.goods-send{
							font-size: 24rpx;
							color: #F59359;
							margin-top: 20rpx;
						}
					}
				}
				.goods-info-num{
					position: absolute;
					right: 30rpx;
					bottom: 50rpx;
				}
			}
		}
		.groupGoods{
			background-color: #FFF;
		}
		.groupGoods-tit{
			display: flex;
			align-items: center;
			height: 100rpx;
			padding: 0 30rpx;
			border-bottom: solid 2rpx #EFEFEF;
			.group-name{
				flex: 1;
				min-width: 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-right: 30rpx;
			}
		}
		.groupGoods-list-box{
			height: 800rpx;
			position: relative;
		}
		.groupGoods-list{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
		.groupGoods-item{
			display: flex;
			padding: 30rpx;
			border-bottom: solid 1px #EFEFEF;
			image{
				width: 175rpx;
				height: 175rpx;
				margin-right: 30rpx;
				border: solid 2rpx #EFEFEF;
			}
			.goods-info-text{
				flex: 1;
				min-width: 0;
				.goods-name{
					font-size: 28rpx;
					color: #141414;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.goods-price{
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.goods-price-left{
						font-size: 24rpx;
						color: #141414;
						text{
							font-size: 32rpx;
						}
					}
				}
				.goods-sku{
					margin-top: 30rpx;
					color: #757575;
					font-size: 22rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					text{
						margin-right: 20rpx;
					}
					/deep/ .u-icon{
						transition: all .5s;
						margin-left: 20rpx;
					}
					&.active{
						/deep/ .u-icon{
							transform: rotate(-180deg);
						}
					}
				}
			}
		}
		.car-bottom{
			position: fixed;
			bottom: 100rpx;
			bottom: calc(100rpx + env(safe-area-inset-bottom));
			bottom: calc(100rpx + constant(safe-area-inset-bottom));
			left: 0;
			right: 0;
			display: flex;
			height: 120rpx;
			align-items: center;
			padding: 0 30rpx;
			justify-content: space-between;
			background-color: #FFF;
			border-top: solid 2rpx rgba(20,20,20,0.05);
			z-index: 10;
			.car-bottom-price{
				flex: 1;
				min-width: 0;
				text{
					font-size: 24rpx;
					color: #141414;
					&.symbol{
						font-weight: bold;
						color: #F59359;
					}
					&.price{
						color: #F59359;
						font-size: 36rpx;
					}
				}
			}
			.car-bottom-btn{
				width: 230rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				color: #FFF;
				font-size: 28rpx;
				border-radius: 8rpx;
				background-color: #141414;
				&.car-bottom-btn-del{
					background-color: #F59359;
				}
				&.car-bottom-export{
					width: 200rpx;
					background-color: #F59359;
					margin-right: 20rpx;
				}
			}
		}
	}
	.car-empty{
		text-align: center;
		flex: 1;
		margin-top: -160rpx;
		.icon{
			margin-bottom: 30rpx;
			image{
				width: 137rpx;
				height: 157rpx;
			}
		}
		.car-empty-tit{
			font-size: 30rpx;
			color: #141414;
		}
		.car-empty-subtit{
			margin-top: 20rpx;
			font-size: 24rpx;
		}
		.car-empty-btn{
			background-color: #141414;
			color: #FFF;
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			margin-top: 40rpx;
		}
	}
</style>
